<template>
  <div class="messageBoxFather" >
   <div class="messageContentTitle">
      <div class="friendName" v-if="chatWithObj">
        <span :title="chatWithObj.nick" style="font-weight:1000;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">{{chatWithObj.nick}}</span>
         <p :title="chatWithObj.username" style="font-size: 0.06rem;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">{{chatWithObj.username}}</p
        >
      </div>
      <div>
         <a-input-search placeholder="搜索聊天记录" v-model="searchWord" style="100%"  @search="onSearchStart" />
      </div>
    </div>
    <div class="screenBox">
      <div class="fenyeqi">
        <div class="block">
          <el-pagination
          :small='true'
            :hide-on-single-page="total<limit && messageData.length==0"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="offset"
            :page-size="limit"
            layout="total,prev,next,jumper"
            :total="total">
          </el-pagination>
          <span style="height:20px;">共 {{Math.ceil(total/limit)}}页</span>
        </div>
      </div>
    <div class="messageBox" ref="messageRef" id="ddddqq" v-if="messageData">
      <el-button class="dayin" style="float:right;" type="text" @click="printPdf" :title="$t('wechat.openPrint')" ><i class="el-icon-printer"></i> {{$t('wechat.dayinSms')}}</el-button>

<!-- 系统消息提示区 -->
<div v-for="(item,index) in messageData" :key="index">
    <!-- ******************************************* 接收区 ******************************************************* -->
      <div v-if="item.msgtype==-1012" class="chat-sender" id="systemTips" style="margin-bottom:.2rem;margin-top:10px;">
        {{$t('wechat.systemTip')}}：{{item.contant}}
      </div>
      <div v-else-if="item.msgtype==10000 || item.msgtype==10002 || item.msgtype==570425393" class="chat-sender" id="systemTips" style="margin-bottom:.2rem;margin-top:10px;">
        {{formateHongBaoSystem(item)}}
      </div>
       
      <div v-else-if="item.msgtype==268445456" class="chat-sender" id="systemTips" style="margin-bottom:.2rem;margin-top:10px;">
        {{item.contant}}
      </div>
      <!-- left -->
      <div v-else-if="item.issend==0">

            <!-- Left --> <!-- 文本 -->
            <div class="chat-sender" style="margin-bottom:.2rem;margin-top:10px;">
            <div>
                <img v-if="item.contactavatar" :src="item.contactavatar" />
                <img v-else src="../../../assets/images/otherApp/user.png" />
              </div>
              <div>{{item.contactnick}} {{item.contactname}}<span style="margin-left:.05rem;">{{formDate(item.sendtime)}}</span> <span style="color:red;" v-if="item.recover==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
              <div>
                <div class="chat-left_triangle"></div>
                <!-- v-html='parsingEmoji(String(item.content))' -->
                <p v-if="formateTikTokMessage(item.content).type==5 && item.content!==''" class="itemTikTok">
                    <span class="listItem" :title="obj.content1" @click="openNews(obj.source)" style="width:240px;" v-for="(obj,index) in formateTikTokMessage(item.content).cards" :key="index">
                      <img width="80" height="80" :src="obj.page_pic" alt="">
                      <div style="margin-left:20px;">
                        {{obj.page_title}}
                      </div>
                    </span>
                </p>
                <p v-else-if="formateTikTokMessage(item.content).type==4 && item.content!==''">
                <img width="240px" style="margin-left:10px" :src="formateTikTokMessage(item.content).page_pic" alt="">
                <br>
                <span>
                  {{formateTikTokMessage(item.content).page_title}}
                </span>
                </p>
                <p v-else>
                      {{formateTikTokMessage(item.content).content}}
                </p>
                <div class="badgeBox" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                <el-button class="orderBtn" :title="$t('wechat.biaojitishi')" v-else @click="markOrder(item)" type="text" size="mini" style="margin-right:20px;float:right;color: #000;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
              </div>
            </div>
        </div>
        <!-----------------------------------------  发 送 区  --------------------------------------->
        <div v-else>
                <!-- Right --> <!-- 发送气泡 -->
                <div  class="chat-receiver" style="margin-bottom:.2rem;margin-top:10px;">
                  <div><img src="../../../assets/images/otherApp/userBlue.png" /></div>
                  <div>{{accountData.nick}} {{item.sendername}}<span style="margin-left:.05rem;">{{formDate(item.sendtime)}}</span> <span style="color:red;" v-if="item.recover==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
                  <div>
                    <div class="chat-right_triangle"></div>
                    <p v-if="formateTikTokMessage(item.content).type==5 && item.content!==''" class="itemTikTok">
                    <span class="listItem" :title="obj.content1" @click="openNews(obj.source)" style="width:240px;" v-for="(obj,index) in formateTikTokMessage(item.content).cards" :key="index">
                      <img width="80" height="80" :src="obj.page_pic" alt="">
                      <div style="margin-left:20px;">
                        {{obj.page_title}}
                      </div>
                    </span>
                </p>
                <p v-else-if="formateTikTokMessage(item.content).type==4 && item.content!==''">
                <img width="240px" style="margin-left:10px" :src="formateTikTokMessage(item.content).page_pic" alt="">
                <br>
                <span>
                  {{formateTikTokMessage(item.content).page_title}}
                </span>
                </p>
                <p v-else>
                  <span>
                      {{formateTikTokMessage(item.content).content}}
                  </span>
                </p>
                  </div>
                </div>
            </div>
          </div>
        </div>
      </div>

    <!-- 查看语音包Message详情 -->
    <a-modal
      title="语音详情"
      :maskClosable="false"
      :footer="null"
      width="50%"
      :visible="visibleAudio"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
    <div class="audioBox">
      <div class="AudioLogo">
        <img width="100%" height="100%" src="../../../assets/images/weChatQQ/cipan.png" alt="">
        <i id="playAudio" :class="icon" title="点击播放" @click="playAudioFile"></i>
      </div>
      <div class="pathBox">
        <div class="itemAudio bottomBorder" style="border-top-right-radius: 5px;">
          文件名称：-语音12345787654
        </div>
        <div class="itemAudio" style="border-bottom-right-radius: 5px;">
          本地路径：C:\Users\han\Desktop\ff5dfb8838d9acfc7eefff669166094e.mp4
        </div>
      </div>
    </div>
      <div style="padding-left:2%;font-size:12px;margin-top:5px;color:#ccc;">点击左侧按钮播放视频</div>
    </a-modal>
    <!-- 查看转发聊天记录详情 -->
     <a-modal
     :maskClosable="false"
      :footer="null"
      :title="MessageFriendTitle"
      :width="500"

      :visible="MessageFriendContentVisible"
      @ok="handleOkMessageFriend"
      @cancel="handleCancelMessageFriend"
    >
      <div class="listBox">
      <div class="chatRecord" v-for="(item,index) in messageRDataList" :key="index">
        <div class="friendAvatar">
          <img  style="width:70%;height:70%;" src="../../../assets/images/weChatQQ/chartImg.png" alt="">
        </div>
        <div>

        </div>
        <div class="" style="background:#efeeee;padding:10px;border-radius:10px;" v-if="(item.msg instanceof Array)">

          <p style="">{{item.sourcename}} 转发聊天记录</p>
          <div style="width:350px;border-bottom:1px solid#fff;padding-top:15px;" v-for="(i,j) in item.msg" :key="j">
          <div v-if="(i.msg instanceof Array)">
            <p style="margin-bottom:10px;">{{i.sourcename}} 转发聊天记录中的转发聊天记录</p>
              <div v-for="(x,y) in i.msg" :key="y">
                <div style="padding-left:20px;">
                  <p>{{x.sourcename}}：{{x.msg}}</p>
                  <p style="margin-bottom:15px;">{{x.time}}</p>
                </div>
              </div>
          </div>
            <div v-else style="padding-left:20px;">
              <p>{{i.sourcename}}：{{i.msg}}</p>
              <p style="margin-bottom:15px;">{{i.time}}</p>
            </div>
          </div>
        </div>
        <div class="chatRecordContent" v-else>
            <div class="chatRecordContentLeft">
              <div class="friendNames" style="font-size:13px;color:#898989d9;">{{item.sourcename}}</div>
              <div class="friendNames friendNamesContent" style="font-size:1000;" title="详情提示">{{item.msg}}</div>
            </div>
              <div class="chatRecordDate">{{item.time}}</div>
          </div>
      </div>
      </div>

    </a-modal>
    <!-- 查看推荐好友名片 -->
    <a-modal
      v-model="modal2Visible"
      :footer="null"
      title="个人名片"
      centered
      @ok="() => (modal2Visible = false)"
    >
    <div class="cardContent">
      <img width="100px" height="100px" :src="card._bigheadimgurl" alt="">
      <div class="cardTextInfo" v-if="card">
        <p style="font-weight:1000;display:flex;align-items:center;font-size:20px;">{{card._nickname}}</p>
        <p>昵称:{{card._fullpy}}</p>
        <p v-if="card._sex==1">性别:男</p>
        <p v-else-if="card._sex==2">性别:女</p>
        <p v-else>性别:未知</p>
        <p>地区:{{card._province}}-{{card._city}}</p>
      </div>
    </div>

    </a-modal>
    <!-- 无法解析消息类型详情 -->
      <a-modal
      v-model="erroMessageModel"
          :getContainer="getRefsAff"
      :footer="null"
      title="消息详情"
      centered
      @ok="() => (erroMessageModel = false)"
    >
    <div v-if="unKnowData">
      {{unKnowData}}
    </div>
    </a-modal>

    <a-modal width="300px" v-model="showRemark" :getContainer="getRefsAff"
      :maskClosable="false" title="提示" @ok="handleOk11">
      <p>{{$t('wechat.biaojibeizhu')}}</p>
      <p><el-input type="textarea" v-model="remark"></el-input></p>
    </a-modal>
  </div>
</template>
<script>

import position from '../map/position.vue'
import { searchFunction } from '@/api/otherApi/otherApp_api'
import { parseTime } from '@/utils/index'
import { sendMarkOrderApi } from '@/api/markApi/index'

const x2js=require('x2js');
const x2jsone=new x2js(); //实例
export default {
  props:['chatWithObj','accountData','recover','offsetLimit'],
  name: "otherMessage",
  components:{
      position
  },
  data(){
      return{        
        showRemark:false,
        remark:'',
        id:'',
        searchWord:'',
        card:'',
        messageRDataList:[],
        offset:1,
        limit:20,
        form:{
          type:[],
          delivery:''
        },
        unKnowData:'',
        total:0,
        self:require('../../../assets/images/otherApp/userBlue.png'),
        messageData:[],
        erroMessageModel:false,
        modal2Visible: false,
        MessageFriendContentVisible:false,
        MessageFriendTitle:'聊天记录',
        icon:'el-icon-video-play',
        visibleAudio:false,
        confirmLoading: false,
        url:'',
        srcList:[],
        usernameTa:''
      }
  },
  watch:{
    '$store.state.account.otherdata':function(){
      if(this.offsetLimit.msg_offset){
        this.offset=this.offsetLimit.msg_offset
        }else{
        this.offset=1
        this.total=0
        }
      this.onSearch()
    }
  },
  
  created(){
    if(this.offsetLimit.msg_offset){
        this.offset=this.offsetLimit.msg_offset
        }else{
        this.offset=1
        this.total=0
        }
    this.onSearch()
  },
  methods:{
    handleOk11(){
      // return
        let data={
        navigation_list:sessionStorage.getItem('arr').split(','),
        model:'other_app',
        isChat:1,
        username:this.chatWithObj.username,
        app_name:this.usernameTa,
        account_id:this.chatWithObj.account_id,
        proof_num:this.chatWithObj.proof_num,
        list_offset:this.offsetLimit.offset,
        list_limit:this.offsetLimit.limit,
        remark:this.remark,
        class:'他趣',
        label:this.offsetLimit.label,
        msg_offset:this.offset,
        id:Number(this.id)
      }
      sendMarkOrderApi(data).then(res=>{
        this.showRemark=false;
        this.$message({
          message: '标记数据成功！',
          type: 'success'
        });
        this.messageData = [];
        this.onSearch()
      })
    },
    // 添加标记点
    markOrder(item){
      this.id=item.id;
      this.usernameTa = item.contactname;
      this.showRemark=true;
    },
  openNews(src){
    window.open(src)
  },
  getRefsAff(){
    return this.$refs.messageRef
  },
  showInfo(item){
    this.erroMessageModel=true
    this.unKnowData=item
  },
  formateTikTokMessage(content){
    if(content===''){
      let data={
        type:77777777
      }
      return data
    }else{
      try {
      return JSON.parse(content).DB_Value
        
      } catch (error) {
         let data={
        type:77777777
      }
      return data
      }
    }
  },
  onSearchStart(){
    this.offset=1
    this.onSearch()
  },
  formateYinyongMessage(item){
    let data=JSON.parse(item)
  },
  // 格式化转发聊天记录
  messageRemrd(item){
    let reg = /\\/g;
      let str=item.replace(reg,'');
      return JSON.parse(str)
  },
  // 打开文件
  downLoadFile(path){
    let data={
      filePath:path
    }
    openFilePosition(data).then(res=>{

    })

  },
  // 格式化位置信息
  formdatePosition(item){
    let xml=item.contant,
      xmlDo=x2jsone.xml2js(xml);
      try{
        return xmlDo.msg.location
      }catch(err){

      }
  },
  // 格式化名片分享
  formateCard(item){
      let xml=item.contant,
      xmlDo=x2jsone.xml2js(xml);
      return xmlDo
  },
  //格式化语音通话
  formateAudioCall(item){
      try{
      if(item.contant.indexOf('recvtime')>0 && item.contant.split('<invitetype>')[1].split("</invitetype>")[0]==0){
        let data={
          text:'视频通话-时长'+ item.contant.split('<duration>')[1].split("</duration>")[0]+'秒',
          icon:'el-icon-video-camera'
        }
        return data
      }else{
        let data={
          text:'语音通话-时长'+ item.contant.split('<duration>')[1].split("</duration>")[0]+'秒',
          icon:'el-icon-phone-outline'
        }
        return data
      }
      }catch(err){
      }
  },
  // 格式化红包
  formateHongBao(item){
      let xml=item.contant,
      xmlDo=x2jsone.xml2js(xml);
      return xmlDo
  },
  // 收红包
  formateHongBaoSystem(item){
    if(item.contant.indexOf('img')==-1){
      return item.contant
    }else{
      return item.contant.replace(/[^\u4e00-\u9fa5]/gi,"")
    }
  },
  // 格式化图片路径
  formateImg(item){
      let xml=item.contant,
      xmlDo=x2jsone.xml2js(xml);
      if(item.respath==''){
        try{
          try{
            return xmlDo.msg.emoji._cdnurl
          }catch(err){
            // return
          }
        }catch(exception){

        }
      }else{
        return item.respath
      }
  },
  formDate(date){
    return parseTime(date)
  },
        //打印
        printPdf(index, row){
            let dom=this.$refs.messageRef
                dom.style['box-shadow']="none"
                dom.style['overflow-y']="visible"
              let focuser = setInterval(() => window.dispatchEvent(new Event('focus')), 500);
                printJS({
                    printable: 'ddddqq',
                    type: 'html',
                    documentTitle:'',
                    targetStyles: ['*'],
                    ignoreElements:['no-print','bc','gb'],
                    onPrintDialogClose: () => {//取消打印回调
                    clearInterval(focuser);
                    dom.style.height="85vh"
                    dom.style['overflow-y']="auto"
                }
        })
            },
    // 搜索聊天内容
    onSearch(vlaue){
      this.messageData=[]
      this.self=this.accountData.avatar
      let data={
          recovery:this.recover,
          proof_num:this.chatWithObj.proof_num,
          account_id:this.chatWithObj.account_id,
          model:'other_app',
          username:this.chatWithObj.username,
          searchkey:this.searchWord,
          offset:this.offset,
          limit:this.limit
      }
      searchFunction(data,'/search/chat/content').then(res=>{
        try {
          this.$refs.messageRef.scrollTop=0
          this.messageData=res.data.reverse()
          this.total=res.data[0].cnt
          res.data.forEach(element => {
            this.srcList.push(element.respath)
          });
        } catch (error) {
 
        }

      })
    },
    // 查看无法解析的消息类型详情
    viewsErroMessagesDetails(item){
      this.unKnowData=item
      this.erroMessageModel=true
    },
    // 查看名片
    viewsFriendCard(data){
      this.card=data
      this.modal2Visible=true
    },
    // 查看分享聊天记录
    viewsMessageFriendList(item){
      this.messageRDataList=item.msg
      this.MessageFriendContentVisible=true
    },
    // 播放语音
    playAudioFile(){
      this.icon='el-icon-video-pause'
      let that=this
      setTimeout(function(){
        that.icon='el-icon-video-play'
      },2000)
    },
    detailsAuideInfo(item){
      this.visibleAudio=true
    },
    handleOk(e) {
      this.ModalText = 'The modal will be closed after two seconds';
      this.confirmLoading = true;
      setTimeout(() => {
        this.visibleAudio = false;
        this.confirmLoading = false;
      }, 500);
    },
    handleCancel(e) {
      this.visibleAudio = false;
    },
    handleOkMessageFriend(){
        this.MessageFriendContentVisible = false;
    },
    handleCancelMessageFriend(){
      this.MessageFriendContentVisible = false;
    },
    // 聊天内容分页
     handleSizeChange(val) {
      this.limit=val
      this.onSearch()
      },
    handleCurrentChange(val) {
      this.offset=val
      this.onSearch()
      }
  }
};
</script>
<style >
.el-icon-circle-close{
    color: #Fff;

}
</style>
<style scoped>
    .badgeBox{
  width: 50px;
  height: 23px;
  border-radius: 10px;
  color: #fff !important;
  background: #f56c6c;
  text-align: center !important;
  line-height: 23px;
  /* position: absolute; */
  padding-left: 5px;
  float: right;
  font-size: 12px;
  /* display: inline-block; */
  /* top: -10px;
  right: -40px; */
}
.listItem{
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
  cursor: pointer;
}
.unKonw{
  cursor: pointer;
}
.videoContent{
  position: relative;
}
.itemTikTok{
  width: 240px;
  min-height: 440px;
  /* margin-left: -60px; */
  position: relative;
  left: 0;
}
.block{
  text-align: center;
  width: 100%;
  display: flex;
  align-items: center;
}
#systemTips{
  text-align: center;
  margin-bottom:10px !important;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  color: rgb(146, 146, 146);
  font-size: 12px;
}
.nameCardNameTExt{
  margin-left: 20px;
}
.viewsInfoDetailsMessages{
  position: relative;
  right: -70px;
  top: 0px;
  font-size: 13px;
  font-weight: none;
  text-decoration:underline;
  color: #409eff;
  cursor: pointer;
}
.viewsInfoDetailsMessages:hover{
  color: #0616f5;
}
.cardContent{
  height: 100px;
  display: flex;

}
.cardTextInfo{
  padding-left: 20px;
}
.cardTextInfo>p{
  margin-bottom: 3px;
  font-size: 14px;
}
.grefTitleSpan{
  display: block;
  width: 170px;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.hrefBox{
  width: 250px;
  height:47px;
  display: flex;
  align-items: center;
}
.hrefBox>div{
  height: 50px;
}
.hrefBoxLeftBox{
  width: 180px;
}

.hrefBoxrightBox{
  width: 40px;
  margin: 0 !important;
}
.hrefBoxContentDeatils{
  width: 170px;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.textInfo{
  float: left;
  width: 230px;
  margin: 0 !important;
  border-top: 1px solid #ccc;
  padding-top: 2px !important;
}
.block{
  text-align: center;
}
.listBox{
  display: block;
  min-height: 700px;
  overflow-y: auto;
}
.chatRecordDate{
  width: 100px;
  height: 60px;
  line-height: 60px;
  font-size: 12px;
}
.chatRecordContentLeft{
  height: 60px;
  width: 290px;
  padding-left: 20px;
}
.friendNamesContent{
    overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.friendNames{
  height: 30px;
  line-height: 30px;
}
.chatRecordContent{
  min-height: 60px;
  width: 400px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(231, 231, 231);
  /* background: #409eff; */
}
.chatRecord{
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.friendAvatar{
  width: 60px;
  height: 60px;
}
.bottomName{
  border-top: 1px solid #ccc;
  float: left;
  height: 20px;
  width: 100%;
  margin: 0 !important;
  text-indent: 0px;
  margin-top: 5px !important;

}
.titleMessageBoxBox{
  display: block;
  padding-left: 12px;
  max-width: 250px;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
p{
  margin: 0;
}
#playAudio{
  position: absolute;
  font-size: 23px;
  color: #dfdfdf;
  top: 34.5%;
  left:34.5%;
  cursor: pointer;
  margin: auto;
}
.bottomBorder{
  border-bottom: 1px solid rgb(224, 224, 224);
}
.AudioLogo{
  position: relative;
  width: 78.14px;
  height: 78.14px;
  background: #e2e2e2;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.itemAudio{
  height: 39px;
  background: #f3f3f3;
  width:625.18px;
  padding: 9.3px;
  display: flex;
  align-items: center;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.pathBox{
  height: 100px;
}
.audioBox{
  width: 100%;
  height: 100px;
  display: flex;
  padding: 0 15px;
}
.infoYuYin{
  position: absolute;
  top: -7px;
  right: -7px;
  color: rgb(192, 192, 192);
  transition: .1s linear;
}
.infoYuYin:hover{
  color: #409eff;
  transition: .1s linear;
  transform: scale(1.1);
}

.yuyin{
  cursor: pointer;
  position: relative;
  width: 60%;
}
.nameSiren{
  height: 15.6px;
  width: 250px;
  float: left;
  margin: 0 !important;
  border-top: 1px solid rgb(219, 219, 219);
  text-indent: 18px;
}

.contentNameCard{
  height: 56.26px;
  width: 100%;
  padding: 10px 20px;
  display: flex;
}
.nameCard{
  width: 250px;
  height: 73.6px;
  background: rgb(243, 243, 243);
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  cursor: pointer;
}
.hongbaotext{
  position: absolute;
  right: 25px;
  top: 15px;
  color: #Fff;

}
 .fenyeqi{
  /* float: left; */
  margin-top: 10px;
}
.mainContentBoxMessage{
  height: 500px;
}
.mapBox{
    width: 100px;
    height: 80px;
    /* float: left; */
}
.mapTitle{
    width: 100%;
    height: 50px;
    padding: .03rem;
    float: left;

}
.map{
    width: 233px;
    height: 206px;
    background: #fff;
    border-radius: 4px;
}
.messageImg{
    display: block;
    width: 100%;
    height: 100%;
}
.chat-sender{
 margin-top: 0 !important;
}
.messageBoxFather{
    width: 429px;
  min-width:429px;
  max-height: 785px;

}
.messageBox {
    margin:0 auto;
    padding: 10px 20px;
    background: rgb(253, 253, 253);
    height: 81vh;
    overflow-y: auto;
    border-radius: 5px;
    /* box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) */
}
.messageContentTitle {
  height: 56.26px;
  background: rgb(255, 255, 255);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  border-radius: 5px;
  margin-bottom: 10px;
}
.friendName {
  line-height: 22.39px;
  font-size:13px;
}
</style>

<style scoped>
.leftMessage{

}
/* 气泡样式 */
body {
  background-color: #ebebeb;
  font-family: -apple-system;
  font-family: "-apple-system", "Helvetica Neue", "Roboto", "Segoe UI",
    sans-serif;
}
.chat-sender {
  clear: both;
  font-weight: bold;
}
.chat-sender div:nth-of-type(1) {
  float: left;
}
.chat-sender div:nth-of-type(2) {
  margin: 0 20px 2px 50px;
  padding: 0px;
  color: #848484;
  font-size: 60%;
  text-align: left;
}
.chat-sender div:nth-of-type(3) {
  background-color: rgb(233, 233, 233);
  float: left;
  max-width: 250px;
  margin: 0 20px 10px 10px;
  padding: 10px 10px 10px 10px;
  border-radius: 7px;
  text-indent: -12px;
}

.chat-receiver {
  clear: both;
  font-weight: bold;
}
.chat-receiver div:nth-of-type(1) {
  float: right;
}
.chat-receiver div:nth-of-type(2) {
  margin: 0px 50px 2px 50px;
  padding: 0px;
  color: #848484;
  font-size: 60%;
  text-align: right;
}
.chat-receiver div:nth-of-type(3) {
  float:right;
  max-width: 250px;
  background-color: #b2e281;
  margin: 0px 10px 10px 10px;
  padding: 10px 10px 10px 10px;
  border-radius: 7px;
}

.chat-receiver div:first-child img,
.chat-sender div:first-child img {
  width: 40px;
  height: 40px;
  /*border-radius: 10%;*/
}

.chat-left_triangle {
  height: 0px;
  width: 0px;
  border-width: 6px;
  border-style: solid;
  border-color: transparent rgb(233, 233, 233) transparent transparent;
  position: relative;
  left: -22px;
  top: 3px;
  overflow: hidden;
}

.chat-right_triangle {
  height: 0px;
  width: 0px;
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent transparent #b2e281;
  position: relative;
  right: -22px;
  top: 3px;
}

.chat-notice {
  clear: both;
  font-size: 70%;
  color: white;
  text-align: center;
  margin-top: 15px;
  margin-bottom: 15px;
}
.chat-notice span {
  background-color: #ececec;
  line-height: 25px;
  border-radius: 5px;
  padding: 5px 10px;
}

.messageBox::-webkit-scrollbar {
  width: 8px;
}
/* <!--修改 滚动条的 下面 的 样式--> */
.messageBox::-webkit-scrollbar-track {
  background-color: rgb(252, 252, 252);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
/* <!--修改 滑块 --> */
.messageBox::-webkit-scrollbar-thumb {
  background-color: #dfdfdf;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
.hongbaotext{
  position: absolute;
  right: 50px;
  top: 40px;
  color: #Fff;
}

/* 当屏幕宽度大于2560时 */
@media screen and (min-width: 2360px) {
  .nameSiren{
  height: 0.06rem;
  width: 1rem;
  float: left;
  margin: 0 !important;
  border-top: 1px solid rgb(219, 219, 219);
  text-indent: .07rem;
}

.contentNameCard{
  height: 0.24rem;
  width: 100%;
  padding: 10px 20px;
  display: flex;
}
.nameCard{
  width: 1rem;
  height: .31rem;
  background: rgb(243, 243, 243);
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  cursor: pointer;
}
.hongbaotext{
  position: absolute;
  width: 150px;
  right: .15rem;
  top: .1rem;
  color: #Fff;
font-size: 13px;
}
  .messageBox {
    margin:0 auto;
    width: 1.7rem;
    height: 5rem;
    padding: 10px 20px;
    background: rgb(253, 253, 253);
    /* height: 4.54rem; */
    max-height: 81vh;
    /* height: auto; */
    /* height: 600px; */
    overflow-y: auto;
    border-radius: 5px;
    /* box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); */
}

.chat-receiver div:nth-of-type(3) {
  float:right;
  max-width: 1.1rem;
  background-color: #b2e281;
  margin: 0px 10px 10px 20px;
  padding: 10px 10px 10px 10px;
  border-radius: 7px;
}

.chat-sender div:nth-of-type(3) {
  background-color: rgb(233, 233, 233);
  float: left;
  max-width: 1.1rem;
  margin: 0 20px 10px 10px;
  padding: 10px 10px 10px 10px;
  border-radius: 7px;
  text-indent: -12px;
}
.map{
    width: 1rem;
    height: 1rem;
    background: #fff;
    border-radius: 4px;
}

.mapTitle{
    width: 100%;
    height: .2rem;
    padding: .03rem;
    float: left;
}
.friendName {
  line-height: 0.1rem;
  font-size: 0.07rem;
}
.messageContentTitle {
  height: 0.3rem;
  width: 1.7rem;
  background: rgb(255, 255, 255);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  border-radius: 5px;
  border-bottom: 1px solid rgb(230, 230, 230);
  margin-bottom: 10px;
}
.messageBoxFather{
  width: 100%;
  min-width:403px;

}
.AudioLogo{
  position: relative;
  width: .5rem;
  height: .5rem;
  background: #e2e2e2;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.itemAudio{
  height: .25rem;
  background: #f3f3f3;
  width: 2.1rem;
  padding: .06rem;
  display: flex;
  align-items: center;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.pathBox{
  height: .5rem;
}
.audioBox{
  width: 100%;
  height: .5rem;
  display: flex;
  padding: 0 .1rem;
}
.hrefBox{
  width: 1rem;
  height:.2rem;
  display: flex;
  align-items: center;
}
.hrefBox>div{
  height: .2rem;
}
.hrefBoxLeftBox{
  width: .8rem;
}

.hrefBoxrightBox{
  width: .2rem;
  margin: 0 !important;
}
.hrefBoxContentDeatils{
  width: .7rem;
  height: .2;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.textInfo{
  float: left;
  width: 1rem;
  margin: 0 !important;
  border-top: 1px solid #ccc;
  padding-top: 2px !important;
}
.grefTitleSpan{
  display: block;
  width: .7rem;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
#playAudio{
  position: absolute;
  font-size: .16rem;
  color: #dfdfdf;
  top: 34.5%;
  left:34.5%;
  cursor: pointer;
  margin: auto;
}
.screenBox{
  height: 85vh;
  background: #fff;
  overflow: hidden;
}
}
@media screen and (min-width: 3440px) {
  .messageBox {
    margin: 0 auto;
    width: 100%;
    padding: 10px 20px;
    background: rgb(253, 253, 253);
    max-height: 63vh;
    overflow-y: auto;
    border-radius: 5px;
    padding-bottom: 200px;
}
}
</style>
